<template>
	<div class="cate-tab2">
		<div class="tatile1">
			<router-link to="/">
				<img :src="tabs2List[0].imgURL">
				<aside>
					<span>{{tabs2List[0].title}}————</span>
					<label>{{tabs2List[0].msg}}</label>
					<em>￥{{tabs2List[0].price}}</em>
				</aside>
			</router-link>
		</div>


		<div class="tatile2 swiper">
			<ul class="swiper-wrapper">
				<template v-for="item in tabs2List">
					<li v-if="item.id>1" :key="item.id" class="swiper-slide">
						<router-link to="/">
							<img :src="item.imgURL" />
							<p>{{item.city}}</p>
							<aside>
								<h3>{{item.title}}</h3>
								<label>{{item.msg}}</label>
								<em> ￥{{item.price}}起</em>
							</aside>
						</router-link>
					</li>
				</template>
			</ul>
		</div>
		<!-- a标签，自定义选择器 -->
		<router-link to="/">
			<button class="btn">加载更多<i class="iconfont">&#xe622;</i></button>
		</router-link>
	</div>
</template>

<script>
	//1.引入vue周期函数
	import {
		onMounted
	} from 'vue';
	//2.引入Swiper的动态组件
	import Swiper, {
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	} from 'swiper';
	//3.说明swiper组件应用配置
	Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination]);

	export default {
		name: 'CategoryTab2',
		props:['propcategory1'],
		watch:{
			propcategory2(){
				console.log(this.propcategory1);
			}
		},
		data() {
			return {
				tabs2List: []
			}
		},
		props:['propcategory2'],
		created() {
			this.tabs2List=this.propcategory2
		},
		setup() {
			onMounted(() => {
				new Swiper('.tatile2', {
					slidesPerView:3
				})
			})
		}
	}
</script>

<style scoped>
	a {
		text-decoration: none;
		color: #000000;
	}

	.tatile1 {
		position: relative;
		margin-top: 0.2rem;
	}

	.tatile1 img {
		width: 100%;
		border-radius: 0.3rem 0.3rem 0 0;
	}

	.tatile1 aside {
		font-size: 0.3rem;
		width: 100%;
		position: absolute;
		bottom: 0px;
		line-height: 0.7rem;
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
	}

	.tatile1 aside em {
		font-weight: bold;
		float: right;
		margin-right: 0.2rem;
		color: #ff9847;
	}

	.tatile2 ul {
		margin-top: 0.2rem;
	}

	.tatile2 ul li {
		margin-top: 0.2rem;
		width: 33.3%;
	}

	.tatile2 img {
		width: 90%;
		border-radius: 0.3rem;
	}

	.tatile2 p {
		position: absolute;
		left: 0;
		top: 0;
		color: white;
		background-color: rgba(0, 0, 0, 0.5);
		padding: 0.1rem 0.1rem;
		border-radius: 0.2rem 0 0.2rem 0;
	}

	.tatile2 aside h3 {
		margin-top: 0.1rem;
		font-size: 0.35rem;
		font-weight: bold;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		/*与高度有关*/
		/* 超出盒子外的文本用省略号代替 */
		-webkit-box-orient: vertical;
	}

	.tatile2 aside label {
		font-size: 0.2rem;
		color: gray;
		margin-top: 0.1rem;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		/*与高度有关*/
		/* 超出盒子外的文本用省略号代替 */
		-webkit-box-orient: vertical;
	}

	.tatile2 aside em {
		display: block;
		margin-top: 0.1rem;
		font-size: 0.3rem;
		font-weight: bold;
		color: #ff9847;
	}

	.btn {
		margin-top: 0.2rem;
		font-weight: bold;
		width: 100%;
		height: 1rem;
		border-radius: 0.5rem;
		border: none;
		border: 1px solid lightgrey;
		background-color: white;
	}

	.btn i {
		font-size: 0.2rem;
	}
</style>
